<template>
  <el-calendar>
    <template #date-cell="{ data }" slot-scope="{date, data}">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split("-").slice(1)[1] }}
      </p>
      <div style="margin-top: 10rpx;">
        <el-row>
          <el-col :span="4" class="colimg">
            <img src="/src/static/images/ic.png" width="10" height="10">
          </el-col>
          <el-col :span="18" class="txtimg">
            <span>为什么啊啊啊啊</span>
          </el-col>
        </el-row>
      </div>
    </template>
  </el-calendar>
</template>
<script lang="ts" setup>
import { ref } from 'vue'



/** 初始化 **/
onMounted(async () => {
})

</script>
<style lang="scss" scoped>
.colimg {
  display: flex;
  justify-content: center;
  align-items: center;
}

.txtimg {
  font-size: 15rpx;
  white-space: nowrap;
  /* 确保文本在一行内显示 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 使用省略号表示文本超出 */
  margin-left: 5rpx;
}

::v-deep .el-calendar-day {
  border: 1px solid black;
  /* 设置边框 */
  border-right: 0;
  /* 去除右边界，因为下一个单元格有边框 */
  border-bottom: 0;
  /* 去除底边界，因为同一行的下一个单元格有边框 */
  height: 130px;
}

::v-deep .el-calendar-table {
  border: 1px solid black;
  /* 设置边框 */
  border-left: 0px;
  border-bottom: 0;
}

::v-deep .el-calendar-table thead th {
  border: 1px solid black;
  /* 设置边框 */
  border-bottom: 0px;
  border-right: 0px;
  border-top: 0px;
}

::v-deep .el-calendar-table tr:last-child .el-calendar-day {
  border-bottom: 1px solid black;
  /* 设置边框 */
  ;
  /* 给最后一行的单元格添加底边框 */
}

// ::v-deep .el-calendar__header{
//   display: none;
// }
// ::v-deep .el-calendar-table tr:nth-last-child(2) .el-calendar-day {
//   border-bottom: 0; /* 去除倒数第二行的单元格底边框 */
// }</style>